<template>
	<view class="skill-component">
			<!-- 技能 start -->
			<uni-forms :modelValue="formData">
				<uni-forms-item label="关键字1"  required>
					<uni-easyinput type="textarea" v-model="formData.keyword" placeholder="技能关键字用于展示技能页,用 '-' 进行分割,如:html-js-css" />
				</uni-forms-item>
				<uni-forms-item label="关键字2"  required>
					<uni-easyinput type="textarea" v-model="formData.startKeyWord" placeholder="技能关键字用于展示启动页面,用 '-' 进行分割,如html-js-css,最大不能超过7个字节" />
				</uni-forms-item>
			</uni-forms>
		
		<block v-for="(item,index) in skillList" :key="index">
			<view class="skill-from flex-c">
				<label :for="index">技能{{index+1}}:</label>
				<input :id="index" v-model="item.content" type="text" class="flex-1 skill-input" placeholder="请输入你会的技能"/>
				<uni-icons v-if="index>3" type="minus" size="30" @click="minusList(index)"></uni-icons>
			</view>
		</block>
		
		<view class="flex-c-c skill-add"  @click="addList">
			<text>继续添加</text>
			<uni-icons  type="plus" size="30"></uni-icons>
		</view>
		
		<!-- 技能 end -->
	</view>
</template>

<script>
	export default{
		name:'skillComponent',
		data(){
			return{
				formData: this.$store.state.twoKeyList,
				skillList: this.$store.state.twoSkillList
			}
		},
		methods:{
			//加
			addList(){
				// let obj = {content: ''}
				// this.skillList.push(obj)
				this.$store.commit('twoAddList')
			},
			//减
			minusList(k){
				// this.skillList.splice(k,1);
				this.$store.commit('twodeletaList',k)
			}
		}
		
	}
</script>

<style lang="scss">
	.skill-component{
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		padding:  40upx;
		.skill-from{
			width: 100%;
			height: 80upx;
			.skill-input{
				height: 50upx;
				margin: 10upx 20upx;
				border: 1upx solid #EBEEF5;
			}
		}
		.skill-add{
			width: 80%;
			height: 60upx;
			margin: 20upx auto;
			border: 1upx solid #EBEEF5;
			background-color: #55aaff;
			border-radius: 20upx;
		}
		input{
			padding-left: 20upx;
		}
	}
</style>
